.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

body,
html {
    background: #ededed;
}

.header {
    z-index: 99;
    width: 100%;
    .px2rem(height, 100);
    .px2rem(line-height, 100);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    background: #2f2f2f;
    span {
        color: white;
        .px2rem(font-size, 32);
        font-weight: bolder;
    }
    span:nth-child(1) {
        .px2rem(margin-left, 20)
    }
}

.personal {
    width: 98%;
    .px2rem(margin-top, 105);
    .px2rem(margin-bottom, 8);
    .px2rem(height, 430);
    margin-left: 1%;
    background: darkgray;
    background-image: url(../img/biao.png);
    background-size: 100% 100%;
    div {
        .px2rem(height, 70);
        //      background: darkgoldenrod;
        .px2rem(line-height, 70)
    }
    div:nth-child(1) {
        .px2rem(margin-bottom, 280);
        display: flex;
        justify-content: space-between;
        color: white;
        img {
            .px2rem(width, 50);
            .px2rem(height, 50);
            .px2rem(margin-top, 10);
            .px2rem(margin-left, 15);
        }
        div:nth-child(1) {
            .px2rem(font-size, 20);
        }
        div:nth-child(2) {
            width: 20%;
            height: 80%;
            justify-content: center;
            .px2rem(line-height, 60);
            background: #8f8d8d;
            .px2rem(margin-top, 5);
            border-radius: 20px;
            border: 1px solid white;
            .px2rem(font-size, 20);
            font-weight: 400;
        }
    }
    div:nth-child(2) {
        display: flex;
        justify-content: space-between;
        color: white;
        img {
            .px2rem(width, 40);
            .px2rem(height, 40);
            .px2rem(margin-top, 10);
            .px2rem(margin-left, 15);
        }
        div:nth-child(1) {
            .px2rem(font-size, 20);
            font-weight: 400;
        }
        div:nth-child(2) {
            .px2rem(line-height, 60);
            .px2rem(margin-top, 5);
            border-radius: 20px;
            width: 15%;
            .px2rem(font-size, 12);
        }
    }
}

.section {
    width: 100%;
    background: white;

    .Newest {
        width: 100%;
        .px2rem(height, 60);
        .px2rem(line-height, 60);
        background: white;
        span {
            display: inline-block;
            .px2rem(height, 32);
            .px2rem(line-height, 32);
            .px2rem(font-size, 26);
            .px2rem(margin-left, 20);
            font-weight: bolder;
            text-indent: 2%;
            border-left: 4px solid black;
        }
    }
    .list {
        width: 95%;
        .px2rem(height, 240);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #CCCCCC;
        div {
            flex: 5;
            .px2rem(height, 230);
            .px2rem(margin-top, 5);
        }
        div:nth-child(1) {
            img {
                .px2rem(height,200);
                .px2rem(width,340)
            }
        }
        div:nth-child(2) {
            .px2rem(font-size, 20);
            p {
                .px2rem(text-indent, 20);
                .px2rem(line-height, 60);
                color: #666666;
            }
            p:nth-child(1) {
                color: black;
            }
            p:nth-child(3) {
                img {
                    .px2rem(width, 34);
                    .px2rem(height, 18);
                }
            }
        }
    }
}